<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>SnowJena控制台</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">SnowJena控制台</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!--            <li class="layui-nav-item"></li>-->
            <li class="layui-nav-item layui-nav-itemed">
                <a class="" href="javascript:;">规则总览</a>
                <!--                    <dl class="layui-nav-child">-->
                <!--                        <dd><a href="javascript:;">列表一</a></dd>-->
                <!--                        <dd><a href="">超链接</a></dd>-->
                <!--                    </dl>-->
            </li>
            <li class="layui-nav-item"><a target="_blank" href="https://github.com/yueshutong/SnowJena">项目官网</a>
            </li>
            <li class="layui-nav-item"><a target="_blank" href="mailto:yster@foxmail.com">邮件咨询</a></li>
            <li class="layui-nav-item"><a target="_blank"
                                          href="//shang.qq.com/wpa/qunwpa?idkey=82d1b1b67c5f3fea1b7ec389ea4226c06e8cb5a9a1e2ba1af2df8f8c7714869f">加入群聊</a>
            </li>
        </ul>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <table class="layui-hide" id="table" lay-filter="table"></table>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <sapn style="color: #9E9E9E">© yster@foxmail.com 版权所有,违权必究</sapn>
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">监控</a>
</script>

<script src="./layui/layui.all.js"></script>
<script>
    var $ = layui.$;
    layui.use('table', function () {
        var table = layui.table;
        var render = table.render({
            elem: '#table'
            , url: '/rule?app=*'
            , cols: [[
                {field: 'app', width: 100, title: 'APP', sort: true}
                , {field: 'id', width: 100, title: 'ID', sort: true}
                , {field: 'name', minWidth: 120, title: 'Name', sort: true}
                , {field: 'allQps', width: 80, title: 'QPS', edit: 'text'}
                , {field: 'number', width: 80, title: '实例'}
                , {field: 'monitor', width: 80, title: '监控/s', edit: 'text', sort: true}
                , {field: 'initialDelay', width: 100, title: '初始时延'}
                , {field: 'acquireModel', width: 103, title: '控制行为', edit: 'text', sort: true}
                , {field: 'algorithm', width: 140, title: '限流算法', edit: 'text', sort: true}
                , {field: 'ruleAuthority', width: 170, title: '黑/白名单', edit: 'text', sort: true}
                , {field: 'limitApp', minWidth: 110, title: '名单列表', edit: 'text'}
                , {fixed: 'right', width:80, align:'center', toolbar: '#barDemo'}
            ]]
            , page: true //开启分页
        });
        //监听单元格编辑
        table.on('edit(table)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            //校验
            var result = true;
            if (field == 'weight') {
                if (isNaN(value)) {
                    layer.msg("你写的不是数字");
                    result = false;
                }
                if (result && value < 0) {
                    layer.msg("权重不能小于0");
                    result = false;
                }
            } else if (field == 'monitor') {
                if (isNaN(value)) {
                    layer.msg("你写的不是数字");
                    result = false;
                }
                if (result && value < 0) {
                    layer.msg("时长不能小于0");
                    result = false;
                }
            } else if (field == 'acquireModel') {
                if (value != 'FAILFAST' && value != 'BLOCKING') {
                    layer.msg("控制行为只能是FAILFAST或BLOCKING");
                    result = false;
                }
            } else if (field == 'algorithm') {
                if (value != 'TOKENBUCKET' && value != 'LEAKBUCKET') {
                    layer.msg("算法只能是TOKENBUCKET或LEAKBUCKET");
                    result = false;
                }
            } else if (field == 'ruleAuthority') {
                if (value != 'AUTHORITY_WHITE' && value != 'AUTHORITY_BLACK' && value != 'NULL') {
                    layer.msg("黑/白名单只能是白名单‘AUTHORITY_WHITE’或黑名单‘AUTHORITY_BLACK’或‘NULL’");
                    result = false;
                }
            } else if (field == 'limitApp') {
                var values = value.split(",");
                data.limitApp = values;
            }
            //PUT
            if (!result) {
                return;
            }
            $.ajax({
                url: "/rule",
                data: {data: JSON.stringify(data)},
                type: "PUT",
                async: false,
                dataType: "json",
                success: function (data) {
                    // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
                    if (data.msg == 'true') {
                        layer.msg('更新成功');
                        //表格重载
                        setTimeout(function(){ render.reload(); }, 3000);
                    } else {
                        layer.msg('更新失败');
                    }
                },
                error: function (XMLHttpResponse, textStatus, errorThrown) {
                    layer.msg('服务器错误 ' + XMLHttpResponse.status);
                }
            });
        });
        //监听查看工具条
        table.on('tool(table)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                //iframe窗
                layer.open({
                    type: 2,
                    title: '['+data.app+'-'+data.id+']QPS监控系统',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['893px', '600px'],
                    content: '/monitor/monitor.html?app='+data.app+'&id='+data.id+'&name=*'
                });
            }
        });
    });
</script>
</body>
</html>